<template>
	<div class="dropdown-box">
		<el-menu
		      default-active="2"
		      class="el-menu-vertical-demo"
		      @open="handleOpen"
		      @close="handleClose"
		      unique-opened>
		      <el-submenu :index="key.toString()" v-for="(item,key) in listData">

		        <template slot="title">
		          <i class="el-icon-setting"></i>
		          <el-checkbox class="role-checkbox" @change="handleCheckAllChange($event,item)"> </el-checkbox><span class="role-title">{{item.rolegroup}}</span>
		        </template>

		        <el-menu-item-group>
		        <div class="role-item-post" >
      					<el-row>
                  <el-checkbox-group v-model="checkedData" @change="bindEven($event,item)">
        					  <el-col :span="4" v-for="v in item.roleDtoTwos">
                      <div class="grid-content bg-purple"><el-checkbox :label="v.roleid" > {{v.rolename}}</el-checkbox>
                      </div>
                    </el-col>
                  </el-checkbox-group>
      					</el-row>
      			</div>
		        </el-menu-item-group>

		      </el-submenu>
		</el-menu>
    <roleDialog ref="role_dialog" v-on:getRoleList="getRoleList()" :listData="listData"></roleDialog>
	</div>
</template>
<script>
import roleDialog from '../components/role-dialog.vue'
import _ from 'lodash'
export default {
  props:["listData"],
    data() {
      return {
        checkedData :  [],
        activeNames :  ['1'],
        updataData  :  {}
      }
    },
    methods: {
      handleEdit(index, row) {
      },
      handleDelete(index, row) {
      },
      handleChange(){
      },
      handleOpen(){
      },
      handleClose(){
      },
      handleCheckAllChange(val,item) {
        var checkedData = this.checkedData;
        if(val)
        {
          _.each(item.roleDtoTwos, obj => {
            checkedData.push(obj.roleid);
          })
          checkedData = _.uniq(checkedData);
        }
        else
        {
          this.checkedData = [];
          _.each(item.roleName, obj => {
            // checkedData = _.pull(checkedData,obj.name);
          })
        }
      },
      bindEven(val,item){
        _.each(item.roleDtoTwos, obj => {
            if(obj.roleid == val){
              this.updataData = obj;
              console.log(obj);
            }
        })
      },
      updateFn(tp){ //修改
        if(this.checkedData.length === 1 )
        {
          this.$refs.role_dialog.roleUpdateFn(this.updataData,tp);
        }else
        {
          this.$message({
            message: '请勾选一名岗位角色进行修改',
            type: 'warning'
          });
        }
      },
      roleDelFn(){
          if(this.checkedData.length === 0)
          {
             this.$message('请选择要删除的选项！');
          }
          else
          {
             this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$post("/role/deleteRole",{ids:this.checkedData},(data)=>{
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                      callback: this.$emit('getRoleList')
                    });
                 },(err)=>{
                    alert(err);
                 });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });
          }
      }
    },
    components:{
      roleDialog
    },
    mounted(){
    }
  }
</script>
<style scoped>
.role-title{
  font-size: 14px;
    color: #000;
    font-weight: bold;
}
.role-title .el-checkbox{
  margin-right: 8px;
}
.role-item{
    padding: 5px;
    border: 1px solid #cfcfcf;
    margin-top: 5px;
    border-radius: 4px;
}
.role-item .el-row{
  padding: 5px 0;
}
.role-item-post{
  padding: 0 50px 20px 50px;
  border-radius: 3px;
}
.role-item-post .el-col{
  padding: 5px 0;
}
.role-checkbox{
  margin-top: -4px;
    margin-right: 7px;
}
.dropdown-box .el-submenu{
  border: 1px solid #f3f3f3;
    border-radius: 4px;
}
</style>
